<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import tabbar from '@/components/tabbar.vue'
import navbar from '@/components/navbar.vue'
const router = useRouter()
const activeNames = ref(['1'])
const showPopover = ref(false)

// 通过 actions 属性来定义菜单选项
const actions = [{ text: '订单' }, { text: '时间' }, { text: '交易品种' }]
const onSelect = (action) => {}

// defineProps<{ msg: string }>()

const activeName = ref('1')
const value = ref('')
// ruoter

onMounted(() => {
  // showDialog({
  //   message: '你当前不具备支付督察信息员资格！\n请进行资格申请',
  //   theme: 'round-button',
  //   confirmButtonText: '申请资格'
  // }).then(() => {
  //   // on close
  //   router.push({ path: 'application' })
  // })
})
</script>

<template>
  <navbar title="添加交易品种" :left="true"> </navbar>
  <van-search v-model="value" placeholder="请输入交易品种" />
  <van-collapse v-model="activeName" accordion>
    <van-collapse-item title="标题1" :name="index" v-for="(item, index) in 3" :key="index">
      <template #title>
        <div style="display: flex; align-items: center">
          <span class="iconfont icon-xiangao2" style="color: #dc584d; font-size: 20px; font-weight: bold"></span>类型
        </div>
      </template>
      <div class="list">
        <div class="hb-box" v-for="(item, index) in 3" :key="index">
          <div class="title">GPB{{ index }}</div>
          <p>描述11</p>
        </div>
      </div>
    </van-collapse-item>
  </van-collapse>
  <!-- 内容 -->

  <tabbar />
</template>

<style scoped lang="scss">
.list {
  padding: 0 20px;
  .hb-box {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
    .title {
      font-size: 14px;
      color: #333;
    }
    p {
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
